/* ══════════════════════════════════════
   ROOT — identique à pagetest.html
══════════════════════════════════════ */
:root {

  /* player vars */
  --textcolor:#1a1a1a;--namecolor:#444444;
  --bottomplayercolor:#ffffff;--bottomplayercolorboxshadow:rgba(0,0,0,0.08);
  --audioitembackground:#f4f4f4;--audioitemhover:#ebebeb;
  --audioitemactivebackgroundborder:#1a1a1a;--audioitemactivebackgroundboxshadow:rgba(0,0,0,0.12);
  --audioaitemmeta:#e8e8e8;--statsbadge:#222222;--yearcolor:#ffffff;
  --searchbackrounginput:#f4f4f4;--searchcolorinput:#1a1a1a;
  --searchipintubordere:#e0e0e0;--searchipintuborderefocusborder:#1a1a1a;
  --searchipintuborderefocusboxshadow:rgba(26,26,26,0.08);
  --playlistesborderbottom:#e0e0e0;--yearbodercolor:#e0e0e0;
  --controlbtnbackground:#f4f4f4;--controlbtnbackgroundactive:#e0e0e0;
  --controlbtncolorhover:0 4px 12px rgba(0,0,0,0.1);--controlbtncoloractive:#1a1a1a;
  --timecolor:#1a1a1a;--timecolorHOVER:#e8e8e8;
  --playcolorbackground:#1a1a1a;--playcolorbackgroundhover:#333333;
  --playcolorbackgroundboxshadow:rgba(26,26,26,0.3);
  --progresbarrbackground:#e0e0e0;--progresbarrbackgroundwebkit:#1a1a1a;
  --volumesliderboxshadow:rgba(0,0,0,0.2);--volumesliderborder:#ffffff;
  --btncolor:#ffffff;
    --btncoloractive:#c59f21;

}

body.dark-mode {

  /* player dark */
  --textcolor:#f0f0f0;--namecolor:#aaaaaa;
  --bottomplayercolor:#1b1a1a;--bottomplayercolorboxshadow:rgba(0,0,0,0.4);
  --audioitembackground:#1e1c1c;--audioitemhover:#252323;
  --audioitemactivebackgroundborder:#ffffff;--audioitemactivebackgroundboxshadow:rgba(255,255,255,0.08);
  --audioaitemmeta:#2a2828;--statsbadge:#f0f0f0;--yearcolor:#1a1a1a;
  --searchbackrounginput:#1e1c1c;--searchcolorinput:#f0f0f0;
  --searchipintubordere:#2a2828;--searchipintuborderefocusborder:#ffffff;
  --searchipintuborderefocusboxshadow:rgba(255,255,255,0.06);
  --playlistesborderbottom:#2a2828;--yearbodercolor:#2a2828;
  --controlbtnbackground:#1e1c1c;--controlbtnbackgroundactive:#2a2828;
  --controlbtncolorhover:0 4px 12px rgba(0,0,0,0.4);--controlbtncoloractive:#ffffff;
  --timecolor:#f0f0f0;--timecolorHOVER:#252323;
  --playcolorbackground:#ffffff;--playcolorbackgroundhover:#e0e0e0;
  --playcolorbackgroundboxshadow:rgba(255,255,255,0.2);
  --progresbarrbackground:#2a2828;--progresbarrbackgroundwebkit:#ffffff;
  --volumesliderboxshadow:rgba(255,255,255,0.1);--volumesliderborder:#1b1a1a;
    --btncolor:#ffffff;

}

/* ══ PAGE HERO ══ */
.page-hero { padding: 7rem 0 3rem; background: var(--section1); border-bottom: 1px solid var(--border); }
.page-hero-inner { max-width: 90%; margin: 0 auto; }
.page-hero-eyebrow {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-secondary); display: flex; align-items: center; gap: 10px; margin-bottom: .7rem;
}
.page-hero-eyebrow::before { content:''; display:block; width:18px; height:1px; background:currentColor; opacity:.35; }
.page-hero h1 { font-size: clamp(1.8rem,4vw,2.8rem); font-weight:900; color:var(--sectiontitlecolor); margin-bottom:.6rem; }
.page-hero p { font-size:.95rem; color:var(--text-secondary); max-width:560px; line-height:1.7; }
.page-hero-stats { display:flex; gap:2.5rem; margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid var(--border); flex-wrap:wrap; }
.page-hero-stat { display:flex; flex-direction:column; gap:2px; }
.page-hero-stat strong { font-size:1.5rem; font-weight:800; color:var(--sectiontitlecolor); line-height:1; transition:transform .3s; }
.page-hero-stat span { font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); }

/* ══ BIBLIOTHÈQUE ══ */
.library-section { max-width:90%; margin:0 auto; padding:3rem 0 200px; }
.lib-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.lib-toolbar-title { font-size:1rem; font-weight:700; color:var(--sectiontitlecolor); display:flex; align-items:center; gap:.5rem; }
.view-toggle { display:flex; gap:4px; background:var(--section1); padding:4px; border-radius:9px; border:1px solid var(--border); }
.view-btn {
  padding:7px 14px; border:none; background:transparent; color:var(--text-secondary);
  border-radius:7px; cursor:pointer; transition:all .2s; display:flex; align-items:center;
  gap:5px; font-size:.82rem; font-weight:600; font-family:inherit;
}
.view-btn.active { background:var(--primary); color:var(--btncolor); box-shadow:0 2px 8px rgba(0,0,0,0.15); }

.search-container { position:relative; margin-bottom:1.2rem; }
.search-input {
  width:100%; padding:14px 50px 14px 18px; border:1px solid var(--border); border-radius:10px;
  background:var(--section2); color:var(--text-primary); font-size:.9rem; font-weight:500;
  transition:all .25s; font-family:inherit; box-sizing:border-box;
}
.search-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,26,26,0.07); }
body.dark-mode .search-input:focus { box-shadow:0 0 0 3px rgba(255,255,255,0.05); }
.search-icon { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--text-secondary); font-size:1.1rem; pointer-events:none; }

.filter-tabs { display:flex; gap:8px; margin-bottom:1.4rem; flex-wrap:wrap; }
.filter-tab {
  padding:8px 20px; border:1px solid var(--border); border-radius:8px; background:var(--section2);
  color:var(--text-secondary); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit;
}
.filter-tab:hover { border-color:var(--primary); color:var(--text-primary); }
.filter-tab.active { background:var(--primary); color:var(--btncolor); border-color:var(--primary); }

/* ══ LISTE ══ */
.audio-list { display:flex; flex-direction:column; gap:10px; margin-bottom:1.5rem; }
.audio-item {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:16px; padding:14px 18px; border-radius:10px; cursor:pointer; transition:all .22s;
  border:1px solid var(--border); background:var(--section2);
}
.audio-item:hover { border-color:var(--primary); background:var(--section1); transform:translateX(4px); }
.audio-item.active { border-color:var(--primary); background:var(--section1); box-shadow:var(--shadow-sm); }
.audio-item img { width:56px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0; transition:transform .3s; }
.audio-item:hover img { transform:scale(1.05); }
.audio-item-info { flex:1; min-width:0; }
.audio-item-title {
  font-weight:700; font-size:.95rem; color:var(--text-primary); margin-bottom:4px;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.audio-item.active .audio-item-title { color:var(--sectiontitlecolor); }
.audio-item-author { font-size:.82rem; color:var(--text-secondary); margin-bottom:4px; }
.audio-item-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.meta-badge {
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  background:var(--section1); border-radius:5px; font-size:.72rem; font-weight:600;
  color:var(--text-secondary); border:1px solid var(--border);
}
.audio-item.active .meta-badge { background:var(--primary); color:var(--btncolor); border-color:transparent; }
.audio-item-actions { display:flex; gap:6px; }
.item-fav-btn {
  width:34px; height:34px; border:1px solid var(--border); border-radius:7px;
  background:var(--section2); color:var(--text-secondary); font-size:1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0;
}
.item-fav-btn:hover, .item-fav-btn.active { background:var(--primary); color:var(--btncolor); border-color:transparent; }
.playing-indicator { color:var(--primary); animation:blink 1.4s infinite; font-size:1rem; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }

/* ══ GRILLE ══ */
.audio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; margin-bottom:1.5rem; }
.audio-card {
  background:var(--section2); border:1px solid var(--border); border-radius:12px;
  padding:16px; cursor:pointer; transition:all .22s; position:relative; overflow:hidden;
}
.audio-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); transform:scaleX(0); transition:transform .25s; }
.audio-card:hover::before { transform:scaleX(1); }
.audio-card:hover { border-color:var(--primary); box-shadow:var(--shadow-md); }
.audio-card.active { border-color:var(--primary); background:var(--section1); }
.card-cover-container { position:relative; margin-bottom:12px; }
.card-cover { width:100%; aspect-ratio:1; border-radius:8px; object-fit:cover; box-shadow:var(--shadow-sm); }
.card-play-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.52);
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; opacity:0; transition:opacity .25s;
}
.audio-card:hover .card-play-overlay { opacity:1; }
.card-play-btn {
  width:46px; height:46px; background:#fff; border:none; border-radius:50%;
  color:#111; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s;
}
.card-play-btn:hover { transform:scale(1.1); }
.card-fav-btn {
  position:absolute; top:10px; right:10px; width:30px; height:30px;
  background:rgba(255,255,255,.9); border:none; border-radius:50%;
  color:#111; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s; opacity:0;
}
.audio-card:hover .card-fav-btn, .audio-card.active .card-fav-btn { opacity:1; }
.card-fav-btn.active { background:var(--primary); color:var(--btncolor); opacity:1 !important; }
body.dark-mode .card-fav-btn { background:rgba(30,28,28,.9); color:#fff; }
.card-info h3 { font-size:.9rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; line-height:1.4; }
.card-author { font-size:.78rem; color:var(--text-secondary); margin-bottom:8px; }
.card-meta { display:flex; gap:6px; flex-wrap:wrap; }

/* ══ PAGINATION ══ */
.pagination { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.pagination-btn {
  padding:9px 20px; border:1px solid var(--border); border-radius:8px;
  background:var(--section2); color:var(--text-secondary); font-size:.84rem; font-weight:600;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:5px; font-family:inherit;
}
.pagination-btn:hover:not(:disabled) { background:var(--primary); color:var(--btncolor); border-color:var(--primary); }
.pagination-btn:disabled { opacity:.4; cursor:not-allowed; }
.pagination-info { padding:9px 18px; background:var(--section1); border:1px solid var(--border); border-radius:8px; font-size:.82rem; font-weight:600; color:var(--text-secondary); }
.page-numbers { display:flex; gap:6px; }
.page-number {
  width:38px; height:38px; border:1px solid var(--border); border-radius:8px;
  background:var(--section2); color:var(--text-secondary); font-size:.82rem; font-weight:600;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.page-number:hover { background:var(--section1); }
.page-number.active { background:var(--primary); color:var(--btncolor); border-color:var(--primary); }

/* ══ BOTTOM PLAYER ══ */
.bottom-player {
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(255,255,255,0.95); border-top:1px solid var(--border);
  padding:14px 40px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:900;
}
body.dark-mode .bottom-player { background:rgba(26,24,24,0.97); border-top-color:#2a2828; }
.player-content { max-width:90%; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; }

.player-track-info { display:flex; align-items:center; gap:14px; }
.player-track-cover { width:58px; height:58px; border-radius:10px; object-fit:cover; }
.player-track-text h3 { font-size:.92rem; font-weight:700; color:var(--textcolor); margin-bottom:2px; }
.player-track-text p { font-size:.78rem; color:var(--namecolor); font-weight:500; }

.player-controls-center { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:500px; }
.control-buttons { display:flex; align-items:center; gap:8px; }
.control-btn {
  width:38px; height:38px; border:none; border-radius:9px; color:var(--timecolor);
  font-size:1.2rem; background:transparent; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
}
.control-btn:hover { color:var(--controlbtncolorhover); transform:scale(1.07); }
.control-btn.active { color:var(--btncoloractive); }
.control-btn.play-btn {
  width:46px; height:46px; background:var(--playcolorbackground); color:var(--btncolor);
  font-size:1.45rem; box-shadow:0 4px 14px var(--playcolorbackgroundboxshadow); border-radius:10px;
}
body.dark-mode .control-btn.play-btn { color:#171718; }
.control-btn.play-btn:hover { background:var(--playcolorbackgroundhover); transform:scale(1.06); }

/* ── Barre de progression ── */
.progress-container { display:flex; align-items:center; gap:10px; width:100%; }
.time-display { font-size:.72rem; color:var(--timecolor); min-width:42px; text-align:center; font-weight:600; cursor:pointer; user-select:none; }
.progress-bar-container {
  flex:1; height:5px; background:var(--progresbarrbackground);
  border-radius:10px; position:relative; cursor:pointer; transition:height .15s;
}
.progress-bar-container:hover { height:7px; }
.progress-bar-fill {
  height:100%; background:var(--progresbarrbackgroundwebkit);
  border-radius:10px; position:relative; transition:width .1s linear; pointer-events:none;
}
.progress-bar-fill::after {
  content:''; position:absolute; right:-7px; top:50%;
  transform:translateY(-50%) scale(0); width:14px; height:14px;
  background:var(--progresbarrbackgroundwebkit); border-radius:50%;
  box-shadow:0 2px 6px var(--volumesliderboxshadow);
  border:2px solid var(--volumesliderborder); transition:transform .15s; pointer-events:none;
}
.progress-bar-container:hover .progress-bar-fill::after { transform:translateY(-50%) scale(1); }

/* ── Volume — widget unifié icône + barre dans le même fond ── */
.volume-control { display:flex; align-items:center; justify-content:flex-end; }

/* Le widget = fond identique à la piste vide de la progress bar,
   padding interne, icône + barre côte à côte dans la même "capsule" */
.volume-widget {
  display:flex; align-items:center; gap:10px;
  background:var(--progresbarrbackground);
  padding:7px 14px 7px 10px;
  border-radius:10px;
  box-shadow:0 2px 8px var(--volumesliderboxshadow);
  transition:all .2s;
}
.volume-widget:hover { filter:brightness(.96); }

/* Bouton icône : sans fond propre, transparent dans le widget */
.volume-icon-btn {
  border:none; background:transparent; padding:0; margin:0;
  color:var(--progresbarrbackgroundwebkit);
  font-size:1.1rem; cursor:pointer; line-height:1;
  display:flex; align-items:center; transition:opacity .2s; flex-shrink:0;
}
.volume-icon-btn:hover { opacity:.7; }
.volume-icon-btn.muted { opacity:.4; }

/* Barre volume — identique à la progress bar */
.volume-track {
  position:relative; width:80px; height:5px;
  background:var(--volumesliderborder);
  border-radius:10px; cursor:pointer; flex-shrink:0; transition:height .15s;
}
.volume-track:hover { height:7px; }
.volume-fill {
  position:absolute; left:0; top:0; bottom:0;
  background:var(--progresbarrbackgroundwebkit);
  border-radius:10px; pointer-events:none; transition:width .05s linear;
}
.volume-thumb {
  position:absolute; top:50%; transform:translateY(-50%) scale(0) translateX(-50%);
  width:13px; height:13px; border-radius:50%;
  background:var(--progresbarrbackgroundwebkit);
  border:2px solid var(--progresbarrbackground);
  box-shadow:0 2px 6px var(--volumesliderboxshadow);
  pointer-events:none; transition:transform .15s;
}
.volume-track:hover .volume-thumb { transform:translateY(-50%) scale(1) translateX(-50%); }
.volume-slider-hidden {
  position:absolute; inset:-8px 0; opacity:0; cursor:pointer;
  width:100%; margin:0; padding:0; -webkit-appearance:none;
}

/* Notification live */
.live-notification {
  position:fixed; bottom:110px; right:24px; z-index:999;
  background:var(--primary); color:var(--btncolor);
  padding:12px 20px; border-radius:10px; font-size:.85rem; font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,.2); opacity:0; transform:translateY(10px);
  transition:all .4s; pointer-events:none;
}
.live-notification.show { opacity:1; transform:translateY(0); }

/* Responsive */
@media(max-width:900px) {
  .page-hero { padding:5.5rem 0 2.2rem; }
  .player-content { grid-template-columns:1fr; gap:10px; text-align:center; }
  .player-track-info { justify-content:center; }
  .player-controls-center { min-width:unset; width:100%; }
  .volume-control { display:none; }
  .audio-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}
@media(max-width:650px) {
  .audio-item { grid-template-columns:auto 1fr; }
  .audio-item-actions { display:none; }
}
@media(max-width:480px) {
  .bottom-player { padding:12px 16px; }
  .player-track-cover { display:none; }
  .player-track-text p { display:none; }
  .audio-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}